<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { formItem } from '../form-item'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import { TableItem } from '@/api/common'
import xtpzService from '@/api/xtpz'
import rzxxDialog from '../dialogs/rzxx-dialog.vue'
const formLabel = ref()
const loading = ref()

// 生命周期
onMounted(async () => {
  // 查询列表数据
  loading.value = true
  formLabel.value = await formItem('rzcx')
  changePageNum(1)
  loading.value = false
})

// 更多条件查询
const form = ref<any>({
  pageSize: 20,
  pageNum: 1,
  filter: {
    rznr: '',
  },
})

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    { label: '部门名称', prop: 'bmmc', width: null, dqfs: 'left' },
    { label: '操作人', prop: 'czrxm', width: null, dqfs: 'left' },
    { label: '操作时间', prop: 'czsj', width: null, dqfs: 'left' },
    { label: '操作IP', prop: 'czip', width: null, dqfs: 'left' },
    { label: '操作类型', prop: 'rzczlxmc', width: null, dqfs: 'left' },
    {
      label: '日志内容',
      prop: 'rznr',
      width: 500,
      custom: false,
      sort: true,
      dqfs: 'left',
    },
  ],
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
  }
})

// 页码发生改变时
const changePageNum = (val: number) => {
  form.value.pageNum = val
  queryTable()
}

// 页条数发生改变时
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  queryTable()
}

/*
 * 查询列表数据
 */
const queryTable = () => {
  const params = { ...form.value }
  loading.value = true
  xtpzService
    .queryListCzrz(params)
    .then((res) => {
      tableData.value.data = res.data.list
      total.value = res.data.total
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

// 子组件传过来的方法
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'kssj')
      const jssj = key.replace('-rq', 'jssj')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  changePageNum(1)
}

const rzxxRef = ref()
const openRzDialog = (row: any) => {
  rzxxRef.value?.openDialog(row)
}
</script>
<template>
  <div class="container" v-loading="loading">
    <div class="form">
      <form-box
        :formData="form.filter"
        :formLabel="formLabel"
        :moreShow="false"
        @searchEvent="searchTable"
      ></form-box>
    </div>

    <div class="table">
      <table-box
        gnbm="cqyj"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="false"
        :showExport="false"
        :changeHeader="false"
        :getTableDataParam="page"
        :formParams="form"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
      >
        <template #myAction>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-link type="primary" :underline="false" @click="openRzDialog(scope.row)"
                >内容详细</el-link
              >
            </template>
          </el-table-column>
        </template>
      </table-box>
    </div>
    <!-- 日志详细 -->
    <rzxx-dialog ref="rzxxRef"></rzxx-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;

  .submit-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .table {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }

  .active-img {
    float: left;
    cursor: pointer;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
</style>
